<template>
	<view>
		<uni-search-bar v-model="title" @confirm="handleConfirm" />
		<view class="article-list-nav">
			<view :class="{'active':index===currentArticleNav}" v-for="(item,index) in newsCategoryList" :key="index"
				@click="handleArticleNavClick(index)">
				{{item.cateName}}
			</view>
		</view>
		<view class="article-list" v-if="articleList && articleList.length>0">
			<view v-show="currentArticleNav===cateIndex" v-for="(cate,cateIndex) in articleList" :key="cateIndex">
				<view v-for="(item,index) in cate.list" :key="index" @click="handleArticleClick(item)">
					<my-list-item :artilce="item" />
				</view>
			</view>
			<uni-load-more :status="articleList[currentArticleNav].loadMoreStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		listNews
	} from '../../common/js/api/news'
	import {
		listCategory
	} from '../../common/js/api/newsCategory'

	export default {
		data() {
			return {
				title: '',
				currentArticleNav: 0,
				newsCategoryList: [],
				articleList: [],
				queryParams: []
			}
		},
		onLoad() {
			// 获取新闻分类
			listCategory({
				pid: 2
			}).then(res => {
				this.newsCategoryList = res.data.list
				this.articleList = res.data.list.map(item => {
					return {
						list: [],
						total: 0,
						loadMoreStatus: 'more',
						queryParams: {
							pageNum: 1,
							pageSize: 10,
							categoryId: item.id
						}
					}
				})
				if (this.newsCategoryList.length > 0) {
					this.getArticleList()
				}
				console.log(this.articleList)
			})
		},
		onReachBottom() {
			this.getArticleList(this.currentCategoryIndex)
		},
		methods: {
			getArticleList() {
				if (this.articleList[this.currentArticleNav].loadMoreStatus === 'no-more') return
				listNews(this.articleList[this.currentArticleNav].queryParams).then(res => {
					if (res.code === 0) {
						if (res.data.list && res.data.list.length > 0) {
							this.articleList[this.currentArticleNav].list = this.articleList[this
								.currentArticleNav].list.concat(res.data.list)
						}
						if (this.articleList[this.currentArticleNav].list.length >= res.data.total) {
							this.articleList[this.currentArticleNav].loadMoreStatus = "no-more"
						} else {
							this.articleList[this.currentArticleNav].loadMoreStatus = "more"
							this.articleList[this.currentArticleNav].queryParams.pageNum += 1
						}
					}

				})
			},
			handleArticleNavClick(index) {
				this.currentArticleNav = index
				if (this.articleList[this.currentArticleNav].list.length <= 0) {
					this.getArticleList()
				}
			},
			handleArticleClick(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/article/show?id=" + item.id + "&title=" + item.title,
				})
			},
			handleConfirm(val) {
				uni.navigateTo({
					url: "/pages/article/simple-list?title=" + val.value
				})
			}
		}
	}
</script>

<style>

</style>